<style itemscope>
  .layui-form-label.required:before {
    /* 这种写法也可以*/
    content: " *";
    color: red;
  }

  .addProductionPlanForm-title .title,
  .examineProductionPlanForm-title .title {
    display: inline-block;
    margin: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 19px;
    position: relative;
    padding: 6px 0 19px 0;
  }

  .addProductionPlanForm-title .title:after,
  .examineProductionPlanForm-title .title:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + 6px);
    height: 3px;
    background: #0a8b0a;
  }

  .layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 113px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
  }

  .layui-form-select dl {
    left: 33px;
    min-width: 85%;
  }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="orderQualityTaskForm" class="layui-form open-form">
  <div class="open-model">
    <div class="open-auto">
      <!-- <div class="layui-form-item" style="margin: 10px 0" id="productionPlanIdBox">
        <label class="layui-form-label w-auto required">选择报工单：</label>
        <div class="layui-input-inline">
          <input
            name="productionPlanId"
            id="productionPlanId"
            class="layui-input"
            type="text"
            placeholder="请选择报工单"
            readonly="readonly"
            style="cursor: pointer; margin-left: -11px; width: 222px" />
        </div>
      </div> -->
      <div class="layui-form-item" style="margin: 10px 0" id="reportOrderIdBox">
        <label class="layui-form-label w-auto required">选择报工单：</label>
        <div class="layui-input-inline">
          <input type="hidden" name="workOrderId" id="workOrderId" />
          <input type="hidden" name="id" id="id" />
          <input type="hidden" name="reportOrderId" id="reportOrderId" />
          <input
            name="reportOrderCode"
            id="reportOrderCode"
            class="layui-input"
            type="text"
            placeholder="请选择报工单"
            readonly="readonly"
            style="cursor: pointer; margin-left: -11px; width: 222px" />
        </div>
      </div>
      <div class="examineProductionPlanForm-title">
        <h3 class="title">报工单信息</h3>
      </div>
      <!-- 表单 -->
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">排产工序：</label>
          <div class="layui-input-block">
            <input id="processName" disabled name="processName" placeholder="排产工序" type="text" class="layui-input" autocomplete="off" />

            <input id="processId" name="processId" type="hidden" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">报工工位：</label>
          <div class="layui-input-block">
            <input id="workshopName" disabled name="workshopName" placeholder="报工工位" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">所属计划：</label>
          <div class="layui-input-block">
            <input id="planCode" disabled name="planCode" placeholder="所属计划" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">物料类型：</label>
          <div class="layui-input-block">
            <input id="productTypeNameA" disabled name="productTypeName" placeholder="物料类型" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">工序编码：</label>
          <div class="layui-input-block">
            <input id="skuCode" disabled name="skuCode" placeholder="工序编码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>

        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">物料名称：</label>
          <div class="layui-input-block">
            <input id="skuName" disabled name="skuName" placeholder="物料名称" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">规格码：</label>
          <div class="layui-input-block">
            <input id="skuSpec" disabled name="skuSpec" placeholder="规格码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">报工单位：</label>
          <div class="layui-input-block">
            <input id="unitName" disabled name="unitName" placeholder="报工单位" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">附件：</label>
          <div class="layui-input-block">
            <div id="attachmentsDiv" class="attachments">
              <img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png" />
            </div>
          </div>
        </div>

        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">批次号：</label>
          <div class="layui-input-block">
            <input id="batchNumber" name="batchNumber" placeholder="批次号" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">报工数量：</label>
          <div class="layui-input-block">
            <input name="workQuantity" id="workQuantity" class="layui-input" disabled />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">剩余送检数</label>
          <div class="layui-input-block">
            <input name="remainderSentQuantity"  id="remainderSentQuantity" class="layui-input" disabled />
          </div>
        </div>
      </div>
      <div class="examineProductionPlanForm-title">
        <h3 class="title">任务配置</h3>
      </div>

      <div class="layui-form-item layui-row">
        <!--      <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检性质：</label>
          <div class="layui-input-block">
            <select id="qualityTestingNatureId" name="qualityTestingNatureId" lay-filter="qualityTestingNatureId" class="common-select-search"></select>
          </div>
        </div>
        -->
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检类型：</label>
          <div class="layui-input-block">
            <select id="qcQualityTypeId" name="qcQualityTypeId" lay-filter="qcQualityTypeId" class="common-select-search"></select>
          </div>
        </div>

        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">质检分类：</label>
          <div class="layui-input-block">
            <select id="qualityTestingCategoryId" name="qualityTestingCategoryId" lay-filter="qualityTestingCategoryId" class="common-select-search"></select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">送检类型：</label>
          <div class="layui-input-block">
            <select id="qualityTestingTypeId" name="qualityTestingTypeId" lay-filter="qualityTestingTypeId" class="common-select-search"></select>
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">送检数量：</label>
          <div class="layui-input-block">
            <input id="submissionQuantity" name="submissionQuantity" placeholder="请输入数量" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>

      <div class="layui-form-item layui-row">
        <!-- <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">送检工位：</label>
          <div class="layui-input-block">
            <select id="inspectDeviceCode"  lay-search="" name="inspectDeviceCode" lay-filter="inspectDeviceCode" class="common-select-search"></select>
          </div>
        </div> -->
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">载具编码：</label>
          <div class="layui-input-block">
            <input id="carrierCode" name="carrierCode" placeholder="请输入载具编码" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto">送检备注：</label>
          <div class="layui-input-block">
            <input id="remark" name="remark" placeholder="请输入备注" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
        <div class="layui-col-md3">
          <label class="layui-form-label w-auto required">状态：</label>
          <div class="layui-input-block">
            <input id="statusDesc" style="border: none" name="statusDesc" placeholder="待确认" type="text" class="layui-input" autocomplete="off" />
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right pd-20">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" id="addQualityTaskSubmit" type="button" lay-filter="addQualityTaskSubmit" lay-submit>保存</button>
    </div>
  </div>
</form>

<!--选择报工单-->
<script type="text/html" id="selectTheWorkProcessTemplate">
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <!-- 头部操作栏 -->
        <div class="layui-form toolbar">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label w-auto">报工单编号：</label>
              <div class="layui-input-inline mr0" style="width: 240px;">
                <input name="code" class="layui-input" type="text" placeholder="报工单编号" />
              </div>
            </div>
            <div class="layui-inline">
              <button class="layui-btn icon-btn" lay-filter="selectTheWorkProcessFormSubSearchLog" lay-submit style="padding: 0 24px;">搜索</button>
              <button id="selectTheWorkProcessClose" class="layui-btn icon-btn">确认选择</button>
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <table class="layui-table" id="selectTheWorkProcessTable" lay-filter="selectTheWorkProcessTable"></table>
      </div>
    </div>
  </div>
</script>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "laydate", "admin", "laytpl", "upload", "config"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var config = layui.config;
    var upload = layui.upload;
    var table = layui.table;
    var admin = layui.admin;
    var form = layui.form;
    let nowData = {};
    let where = [];
    if (typeof parentData !== "undefined") {
      nowData = { ...parentData };
      if (nowData.where) {
        where = nowData.where;
      }
    }
    let addQualityInspectionTaskTableData = [];

    let _type = "";

    //选择报工单
    let templateData = admin.getTempData("workOrderQuaTaskInfoData");

    //修改or详情
    if (templateData) {
      document.getElementById("submissionQuantity").disabled = true;
      $("#productionPlanId").disabled = false; //显示
      $("#qualityTestingCategoryId").disabled = false; //显示
      $("#submissionQuantity").disabled = false; //显示
      $("#inspectDeviceCode").disabled = false; //显示
      $("#carrierCode").disabled = false; //显示
      $("#remark").disabled = false; //显示
      admin.initDataSelect("enterprise/device/admin/device/list", { limit: 9999 }, "inspectDeviceCode", templateData.inspectDeviceCode, "送检工站", "deviceName", "deviceCode");
      _type = templateData.type;
      $("#productionPlanId").val(templateData.workOrderCode);
      //初始化工单
      form.val("orderQualityTaskForm", templateData);
      //如果是详情
      if (_type === "details") {
        $("#productionPlanId").disabled = true; //显示
        $("#qualityTestingCategoryId").disabled = true; //显示
        $("#submissionQuantity").disabled = true; //显示
        $("#inspectDeviceCode").disabled = true; //显示
        $("#carrierCode").disabled = true; //显示
        $("#remark").disabled = true; //显示
        //赢藏保存按钮
        $('button[lay-filter="addQualityTaskSubmit"]').hide();
      } else {
        $("#productionPlanId").disabled = false; //显示
        $("#qualityTestingCategoryId").disabled = false; //显示
        $("#submissionQuantity").disabled = false; //显示
        $("#inspectDeviceCode").disabled = false; //显示
        $("#carrierCode").disabled = false; //显示
        $("#remark").disabled = false; //显示
        //初始化检验工站
        $("#productionPlanId").click(function () {
          showSelectTheWorkProcessTemplateModel();
        });
      }
      let imagUrl = templateData.accessory;

      if (imagUrl && imagUrl.indexOf(".pdf") !== -1) {
        PDFObject.embed(imagUrl, "#attachmentsDiv");
      } else {
        let attachmentHtml = "";
        imagUrl.split(",").forEach((attachmentUrl, index) => {
          attachmentHtml += '<div><div><img style="max-width: 300px;max-height: 200px" src="' + attachmentUrl + '"></div></div>';
        });
        $("#attachmentsDiv").html(attachmentHtml);
      }
    }
    //新增
    else {
      document.getElementById("submissionQuantity").disabled = false;
      admin.initDataSelect("enterprise/device/admin/device/list", { limit: 9999 }, "inspectDeviceCode", null, "送检工站", "deviceName", "deviceCode");
      _type = "add";
      //定义选择报工单的点击事件
      $("#productionPlanId").click(function () {
        showSelectTheWorkProcessTemplateModel();
      });
      $("#reportOrderCode").click(function () {
        admin.formOpen({
          type: 1,
          title: "选择报工单",
          area: "82%",
          offset: "65px",
          path: "components/productionPlan/productionTheWorkOrder.html",
          success: function () {
            parentData.eventName = "radio";
            parentData.where = {
              qualityType: 1,
              status: "checked"
            };
          },
          end: async function () {
            let list = childData.list;
            if (list && list.length > 0) {
              $("#reportOrderId").val(list[0].id);
              $("#reportOrderCode").val(list[0].code);
              $("#workOrderId").val(list[0].workOrderId);
              $("#workshopName").val(list[0].workshopName);
              $("#inspectDeviceCode").val(list[0].workshopId);
              $("#workQuantity").val(list[0].workQuantity);
              $("#remainderSentQuantity").val(list[0].remainderSentQuantity);

              const res = await admin.reqPro("production/productionPlan/admin/productionWorkOrder/detail/" + list[0].workOrderId);
              console.log(res);

              // let checkStatus = table.checkStatus("selectTheWorkProcessTable"); //test即为基础参数id对应的值
              let dataS = res.data;
              getWorkOrderDetails(dataS.id);
              $("#productionPlanId").val(dataS.code);
            }
            // const res = await admin.reqPro("production/productionPlan/admin/productionWorkOrder/list", { workOrderId: list[0].workOrderId });
            /*    $("#productionPlanId").val(dataS.code);*/
            //查询报工单信息
            // const res2 = await admin.reqPro("production/productionPlan/admin/productionTheWorkOrder/list", { workOrderId: dataS.id });
            //根据报工单id查询工单详情
            //  if (res2.data.length > 0) {
            //     $("#inspectDeviceCode").val(res2.data[0].workshopId);
            //     $("#workshopName").val(res2.data[0].workshopName);
            //     console.log(123,res2.data);

            //     $("#submissionQuantity").val(res2.data[0].workQuantity);
            //   }

            // layer.close(selectTheWorkProcessTemplate);
          }
        });
      });

      if (nowData.eventName == "setTask" && nowData.data) {
        console.log(123, nowData);
        $("#reportOrderCode").attr("disabled", true);
        let obj = nowData.data;
        $("#reportOrderId").val(obj.id);
        $("#reportOrderCode").val(obj.code);
        $("#workOrderId").val(obj.workOrderId);
        $("#workshopName").val(obj.workshopName);
        $("#inspectDeviceCode").val(obj.workshopId);
        $("#workQuantity").val(obj.workQuantity);

        const res = await admin.reqPro("production/productionPlan/admin/productionWorkOrder/detail/" + obj.workOrderId);
        // let checkStatus = table.checkStatus("selectTheWorkProcessTable"); //test即为基础参数id对应的值
        let dataS = res.data;
        getWorkOrderDetails(dataS.id);
        $("#productionPlanId").val(dataS.code);
      }
    }
    function showSelectTheWorkProcessTemplateModel() {
      let selectTheWorkProcessTemplate = admin.open({
        type: 1,
        title: "选择报工单",
        area: "82%",
        content: $("#selectTheWorkProcessTemplate").html(),
        success: function () {
          form.render("select");
          // 渲染表格
          let selectTheWorkProcessTable = table.render({
            elem: "#selectTheWorkProcessTable",
            url: config.base + "production/productionPlan/admin/productionWorkOrder/list",
            page: true,
            cellMinWidth: 100,
            cols: [
              [
                { type: "radio" },
                { field: "code", title: "工单编码" },
                { field: "processName", title: "所属工序" },
                { field: "planCode", title: "所属生产计划" },
                { field: "workOrderQualityDesc", title: "工单性质" },
                { field: "deviceCode", title: "责任工站" },
                { field: "skuCode", title: "物料编码(料号)" },
                { field: "productionQuantity", title: "排产数量" },
                { field: "finishQuantity", title: "已经完成" },
                { field: "predictStartTime", title: "预计开始时间" },
                { field: "predictFinishTime", title: "预计完工时间" },
                { field: "statusDesc", title: "状态" }
              ]
            ]
          });

          // 搜索
          form.on("submit(selectTheWorkProcessFormSubSearchLog)", function (data) {
            selectTheWorkProcessTable.reload(
              {
                where: data.field,
                page: { curr: 1 }
              },
              "data"
            );
          });

          // 确认选择
          $("#selectTheWorkProcessClose").click(function () {
            let checkStatus = table.checkStatus("selectTheWorkProcessTable"); //test即为基础参数id对应的值
            let dataS = checkStatus.data[0];
            if (checkStatus.data.length == 0) {
              layer.msg("请选择报工单", { icon: 2, time: 1000 });
            } else {
              getWorkOrderDetails(dataS.id);
              $("#productionPlanId").val(dataS.code);
              layer.close(selectTheWorkProcessTemplate);
            }
          });
        }
      });
    }

    // 表单提交事件
    form.on("submit(addQualityTaskSubmit)", function (d) {
      layer.load(2);
      delete d.field.productionPlanId;
      //   if (templateData) {
      //     d.field.id = templateData.id;
      //     if (addQualityInspectionTaskTableData[0]) {
      //       d.field.workOrderId = addQualityInspectionTaskTableData[0].id;
      //     }
      //   } else {
      //     d.field.workOrderId = addQualityInspectionTaskTableaddQualityInspectionTaskTableDataData[0].id;
      //   }
      if (_type === "determine") {
        d.field.status = "inspect";
      }
      admin.req(
        templateData ? "production/quality/admin/workOrderQualityTask/update" : "production/quality/admin/workOrderQualityTask/add",
        d.field,
        function (res) {
          layer.closeAll("loading");
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            table.reload("workOrderQualityTaskTable");
            layer.closeAll("page");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        templateData ? "PUT" : "POST"
      );
      return false;
    });

    //初始化质检分类
    //quality_testing_category
    admin.initDataSelectAndMap(
      "production/qualityTesting/admin/qualityTestingCategory/list",
      { limit: 9999 },
      "qualityTestingCategoryId",
      templateData == null ? null : templateData.qualityTestingCategoryId,
      "质检分类",
      "name",
      "id",
      null
    );
    //初始化质检类型
    admin.initDataSelectAndMap(
      "production/qualityTesting/admin/qualityTestingType/list",
      { limit: 9999 },
      "qualityTestingTypeId",
      templateData == null ? null : templateData.qualityTestingTypeId,
      "送检类型",
      "name",
      "id",
      null
    );
    //质检性质
    /*  admin.getDictList("qualityTestingNatureId", "sys_product_type_nature", templateData == null ? null : templateData.qualityTestingNatureId, "质检性质");
     */
    //质检类型
    admin.getDictList("qcQualityTypeId", "sys_qc_quality_type", templateData == null ? null : templateData.qcQualityTypeId, "质检类型");

    // 获取报工单信息和工序信息
    function getWorkOrderDetails(id, _type) {
      let dataS = [];
      $("#qualityTestingNatureId").empty();
      // 查询报工单信息
      admin.reqSync(
        "production/qualityTesting/admin/workOrderQualityTestingTask/getWorkOrderInfoById",
        { workOrderId: id },
        (res) => {
          if (res.code == 200) {
            dataS = res.data;
            /*
              admin.getDictList("qualityTestingNatureId", "sys_product_type_nature", dataS.materialNature, "质检性质");
  */
          }
        },
        "GET"
      );

      if (_type == "edit") {
        addQualityInspectionTaskTableData[0] = Object.assign(dataS, addQualityInspectionTaskTableData[0]);
      } else {
        addQualityInspectionTaskTableData[0] = dataS;
      }

      //初始化信息
      $("#processName").val(addQualityInspectionTaskTableData[0].processName);
      $("#processId").val(addQualityInspectionTaskTableData[0].processId);
      $("#deviceCode").val(addQualityInspectionTaskTableData[0].deviceCode);
      $("#planCode").val(addQualityInspectionTaskTableData[0].planCode);
      $("#productTypeNameA").val(addQualityInspectionTaskTableData[0].productTypeName);
      $("#skuCode").val(addQualityInspectionTaskTableData[0].skuCode + "-" + addQualityInspectionTaskTableData[0].processName);
      $("#skuName").val(addQualityInspectionTaskTableData[0].skuName + "-" + addQualityInspectionTaskTableData[0].processName);
      $("#skuSpec").val(addQualityInspectionTaskTableData[0].skuSpec);
      $("#unitName").val(addQualityInspectionTaskTableData[0].unitName);
      $("#inspectDeviceCode").val(addQualityInspectionTaskTableData[0].deviceCode);

      //图片地址
      let imagUrl = addQualityInspectionTaskTableData[0].accessory;

      if (imagUrl && imagUrl.indexOf(".pdf") !== -1) {
        PDFObject.embed(imagUrl, "#attachmentsDiv");
      } else {
        let attachmentHtml = "";
        imagUrl.split(",").forEach((attachmentUrl, index) => {
          attachmentHtml += '<div><div><img style="max-width: 300px;max-height: 200px" src="' + attachmentUrl + '"></div></div>';
        });
        $("#attachmentsDiv").html(attachmentHtml);
      }
    }

    function showViewAttachmentModel(data) {
      admin.open({
        type: 1,
        area: ["60%", "80%"],
        offset: "65px",
        title: "查看附件",
        content: $("#viewAttachmentHtml").html(),
        success: function () {
          if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
            PDFObject.embed(data.attachment, "#example1");
          } else {
            var attachmentHtml = "";
            data.attachment.split(",").forEach((attachmentUrl, index) => {
              attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
            });
            $("#example1").html(attachmentHtml);
          }
        }
      });
    }
  });
</script>
